	#cases(id=id)
#include("templates/layout.html")
#@layout()

#define seo_title()
#seoTitle(cases.seoTitle, "案例") - #seo("seo_title")
#end

#define seo_keywords()
#seoMetaKeywords(cases.seoMetaKeywords)
#end

#define seo_description()
#seoMetaDescription(cases.seoMetaDescription)
#end

#define import_head_cssjs()
<link rel="stylesheet" href="./css/case.css">
#end

#define body_class()auto-foot-ct#end

#define body()
	<div class="auto-contanter text-dark" data-head-fiexd="true">
		<!-- banner图 -->
		<div>
			<img class="db pct100" src="#if(isMobile && cases.imgH5)#(cases.imgH5)#else#(cases.img)#end" alt="" srcset="">
		</div>
		<!-- 案例详情 -->
		<div class="p1 bg-white">
			<div class="cd-container ">
				<h1 class="n cd-title">
					<span class="red-bd">#(cases.title)</span>
				#if(!isMobile)
					<!-- pc端分享 -->
					<div class="r f0 hidden-xs">#include("templates/share.html")</div>
				#end
				</h1>
				<p class="cd-description">#(cases.subtitle)</p>
				<ul class="f14 cd-classified">#if(isMobile && cases.contentH5)#(cases.contentH5)#else#(cases.content)#end</ul>
			</div>
		</div>
		<!-- 案例图片 -->
		<div class="container-fluid mb10 bg-white">
		#casesImageList(id=cases.id)
			#for(casesImage : casesImageList)
			<img class="db pct100 cd-detail-img" src="#(casesImage.img)" alt="" srcset="">
			#end
		#end
			#if(isMobile)
			<!-- 移动端分享 -->
			<div class="f0 visible-xs-block">#include("templates/share.html")</div>
			#end
			<!-- 上一篇下一篇 -->
			<div class="cd-prev-next tc">
			#prevCases(id=id, var="prev")
				#if(prev)
				<a href="#(ctx)/detail/cases-#(prev.id).html" target="_blank" class="prev dib vm ell">上一篇<span class="hidden-xs">：#(prev.title)</span></a>
				#else###没有上一个案例也需要占位，不然显示会偏移
				<a class="prev dib vm ell"><span class="hidden-xs"></span></a>
				#end
			#end
				<a href="#(ctx)/category/cases.html" target="_blank" class="cd-center dib vm">返回目录</a>
			#nextCases(id=id, var="next")
				#if(next)
				<a href="#(ctx)/detail/cases-#(next.id).html" target="_blank" class="next dib vm ell">下一篇<span class="hidden-xs">：茅塔范德萨发生大#(next.title)</span></a>
				#else###没有下一个案例也需要占位，不然显示会偏移
				<a class="next dib vm ell"><span class="hidden-xs"></span></a>
				#end
			#end
			</div>
		</div>
	#randomCasesList(var = "page")
		#if(page != null && page.list.size() > 0)
		<!-- 案例推荐 -->
		<div class="case-recommend mb10 container rel">
			<div class="cs-hd visible-xs-block">
				<span class="f18">案例推荐</span>
				<a href="#(ctx)/category/cases.html" target="_blank" class="text-secondary r f14">MORE</a>
			</div>
			<div id="caseRecommend" class="ovh ">
				<div class="swiper-wrapper">
				#for(cases : page.list)
					<a href="#(ctx)/detail/cases-#(cases.id).html" target="_blank" class="case-item swiper-slide">
						<img class="case-img" src="#if(isMobile && cases.imgH5)#(cases.imgH5)#else#(cases.img)#end" alt="">
						<div class="hover-actve-bg hidden-xs"></div>
						<div class="hover-actve hidden-xs">
							<div class="description">#(cases.title)</div>
							<div class="description-info">#(cases.subtitle)</div>
						</div>
						<div class="ell mt5 visible-xs-block">#(cases.subtitle)</div>
					</a>
				#end
				</div>
			</div>
			<!-- Add Arrows -->
			<div class="swiper-button-next hidden-xs">
				<a class="random-cases" href="javascript:alert(1);"> <span
					class="iconfont f20 ">&#xe633;</span>
				</a>
			</div>
			<div class="swiper-button-prev hidden-xs">
				<a class="random-cases" href="javascript:alert(2);"> <span
					class="iconfont f20">&#xe605;</span>
				</a>
			</div>
		</div>
		#end
	#end
	</div>
#end

#define import_foot_js()
<script src="./js/lib/social-share.min.js"></script>
<script src="./js/case.min.js"></script>
<script>
$(document).ready(function(){
	$(".random-cases").click(function(){
		var htmlobj=$.ajax({url:"/recommend/case.html", async:false});
		$("#caseRecommend").html(htmlobj.responseText);
	});
});
</script>
#end
#end
